<template>
  <div :class="['leftPanel', isOpen ? 'fadeOutBox' : 'fadeInBox']">
    <div class="header">
      <div class="title">{{ title }}</div>
      <div @click="isOpen = !isOpen" :class="['control', isOpen ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left']"></div>
    </div>
    <div :class="['contents', isOpen ? 'c-fadeOutBox' : 'c-fadeInBox']">
      <slot> </slot>
    </div>
    <div class="changeMap">
      <div @click="changeMap(item.name)" :class="{ active: activeMap == item.name }" class="item" v-for="item in mapList" :key="item.name">
        <img :src="item.img" alt="" srcset="" />
        <div class="text">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isOpen: true,
      mapList: [
        {
          name: "影像",
          img: require("@/assets/image/waterMap/yx.png"),
        },
        {
          name: "地形",
          img: require("@/assets/image/waterMap/dx.png"),
        },
        // {
        //   name: "矢量",
        //   img: require("@/assets/image/waterMap/sl.png"),
        // },
      ],
      activeMap: "影像",
    }
  },
  methods: {
    changeMap(name) {
      this.activeMap = name
      this.$emit("changeMap", name == "影像" ? "ygyx2023" : "COPchina30mDEM")
    },
  },
}
</script>
<style lang="scss" scoped>
.leftPanel {
  width: 392px;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #dde1eb;
  transition: all 1s;
  .header {
    width: calc(100% - 5px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 3px 20px;
    box-sizing: border-box;
    .title {
      font-size: 18px;
      font-family: MiSans, MiSans;
      font-weight: 600;
      color: #00142d;
      line-height: 40px;
      text-align: left;
    }
    .control {
      cursor: pointer;
    }
  }
  &.fadeOutBox {
    transform: translateX(-340px);
  }
  &.fadeInBox {
    transform: translateX(0%);
  }
  .contents {
    height: calc(100% - 40px);
    &.c-fadeInBox {
      transition: all 0s;
      transform: translateX(0px);
    }
    &.c-fadeOutBox {
      transition: all 1s;
      transform: translateX(-90px);
    }
  }
  .changeMap {
    // width: 200px;
    // height: 50px;
    border: 1px solid rgba(10, 22, 39, 0.4);
    position: absolute;
    right: -10px;
    bottom: 10px;
    z-index: 99;
    margin-left: 20px;
    transform: translateX(100%);
    display: flex;
    background: rgba(255, 255, 255, 0.5);
    padding: 6px 5px;
    border-radius: 3px;
    box-shadow: 0px 0px 5px 0px rgba(0, 20, 45);

    > .item {
      width: 90px;
      height: 60px;
      margin: 1px 4px;
      border: 1px solid rgba(141, 140, 140, 0.8);
      box-shadow: 0px 2px 7px 0px rgba(167, 167, 167, 0.8);
      border-radius: 3px;
      cursor: pointer;
      position: relative;
      > img {
        width: 100%;
        height: 100%;
      }
      > .text {
        color: #fff;
        font-size: 12px;
        transform: scale(0.8);
        padding: 2px 3px;
        position: absolute;
        right: 2px;
        bottom: 2px;
        background: rgba(120, 120, 120, 0.5);
      }
      &.active {
        border: 1px solid #01bd88;
        .text {
          background: rgba(1, 189, 136, 0.6);
        }
      }
    }
  }
}
</style>
